<template>
  <div>
    <h1>子路由配置</h1>
    <hr />
    <div>
      <router-link to="detail">Detail</router-link>&nbsp;|&nbsp;
      <router-link to="copyright">Copyright</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "demon14",
  data() {
    return {
      text: "Hello world!"
    };
  },
  // 进入路由页面
  beforeRouteEnter(to, from, next) {
    to;
    from;
    console.log("beforeRouterEnter:" + to.name);
    // 此时是无法访问到this变量的
    // 也就无法访问this对象内部成员
    // 但此时next有一个回调函数可以拿到vm实例对象
    next(vm => {
      console.log("访问" + vm.text);
    });
  },
  // 路由更新时候,此时可以访问this
  // 路由参数发生变化时候调用，同一页页面后路径参数发生变化
  beforeRouteUpdate(to, from, next) {
    console.log("路由更新:" + to.name + "原" + from.name);
    next();
  },
  // 即将离开
  beforeRouteLeave(to, from, next) {
    console.log("离开路由:" + to.name + "原" + from.name);
    next();
  }
};
</script>
<style lang="stylus" scoped></style>
